$(function () {
    // 判断登陆
    var username = getCookie('username')
    if(username){
        $('.customNav').html(`
        <li style="color:#ccc">
            欢迎:<span style="color:red;">${username}</span>
        </li>
        <li>
            <a href="javascript:;" class="logout">退出</a>
        </li>
        `)
        // 购物车中的数据
        // 先判断本地存储中是否有数据
       var data = localStorage.getItem('data')
       // console.log(data);
       if(!data){
           var arr = [];
       }else{
           var arr = JSON.parse(data)
       }
       $('.shoppingCart .num').html(arr.length);
        $('.logout').click(function(){
            removeCookie('username')
            $('.customNav').html(`
            <li>
                <a href="javascript:;">登录</a>
            </li>
            <li>
                <a href="register.html">注册</a>
            </li>
            `)
            gologin(); 
        })
        
    }else{
      $('.customNav').html(`
      <li>
          <a href="javascript:;">登录</a>
      </li>
      <li>
          <a href="register.html">注册</a>
      </li>
      `)
      gologin(); 
    }
    gologin();
    // 购物车中的数据
    var data = localStorage.getItem('data')
   // console.log(data);
   if(!data){
       var arr = [];
   }else{
       var arr = JSON.parse(data)
   }
   $('.num').html(arr.length);
//    点击我的购物车操作
   $('.f10').on('click',function(){
    //    先判断登陆
    var username = getCookie('username')
    if(username){
        // 登陆了跳转到购物车中
        location.href="../HTML/shop-cart.html"
    }else{
        layer.msg('请先登陆！', {
            icon: 2,
            time: 1500
        }, function () {
            location.href = "../HTML/login.html";
        })

    }

   })

    // 详情页必定存在id;
    var reg = /id=(\d+)/;
    var arr = reg.exec(location.search)
    if (!arr) {
        layer.msg('非法访问！', {
            icon: 2,
            time: 1500
        }, function () {
            location.href = "../HTML/list.html";
        })
    }
    var id = arr[1];
    // 当获取到id的时候，从数据库中获取数据并显示
    var laodindex = layer.load(0, {
        shade: [1, "#000"]
    })
    
    $.get('../php/detail.php', {id}, res => {

        // 解构其回调函数
        var {
            meta: {
                status,
                msg
            },
            data
        } = JSON.parse(res);
        if (status === 1) {
            // 将图片替换
            $(".preview_img").html(
                `<img src="${data.image}.jpg" width="100%" alt="">
                <div class="mask"></div>
                <div class="big">
                    <img src="${data.image}.jpg" width="800px" alt="" class="bigimg">
                </div>`
            )
            var str = '';
            for (var i = 0; i <= 4; i++) {
                if (i === 0) {
                    str += ` <li class="current"><img src="${data.image}.jpg" alt="" width="56px"></li>`
                } else {
                    str += ` <li><img src="${data.image}${i}.jpg" alt="" width="56px"></li>`
                }
            }
            $(".list_item").html(str);
            layer.close(laodindex);
        // 加入购物车
        addcart(username,data.id);
        }

        // 右边描述
        $('.sku_name').html(
            `
            ${data.name} ${data.description}
            `
        )
        $('.news').html(`
        购买1-50件时享受单件价￥${data.pirce}，超出数量以结算价为准
        `)
        $('.summary_price').html(`
        <dt>闪购价</dt>
        <dd>
            <i class="price">${data.pirce}</i> 
            <a href="#">降价通知</a>
            <div class="remark">累计评价51万+</div>
        </dd>
        `)


        $(".preview_img").mouseover(function (e) {
            $(this).children(".mask").show();
            $(this).children(".big").show();
        });
        $(".preview_img").mouseout(function () {
            $(this).children(".mask").hide();
            $(this).children(".big").hide();
        });
        $(".preview_img").mousemove(function (e) {

            var x = e.pageX - this.offsetLeft;
            var y = e.pageY - this.offsetTop;
            var maskX = x - parseInt($(this).children(".mask").css("width")) / 2;
            var maskY = y - parseInt($(this).children(".mask").css("height")) / 2;
            // console.log(maskX);
            var maskMax = parseInt($(this).css("width")) - parseInt($(this).children(".mask").css("width"));
            if (maskX <= 0) {
                maskX = 0;
            } else if (maskX >= maskMax) {
                maskX = maskMax;
            }
            if (maskY <= 0) {
                maskY = 0;
            } else if (maskY >= maskMax) {
                maskY = maskMax;
            }
            $(this).children(".mask").css("left", maskX + 'px');
            $(this).children(".mask").css("top", maskY + 'px');
            var bigMax = parseInt($(".bigimg").css("width")) - parseInt($(".big").css("width"));
            var bigX = maskX * bigMax / maskMax;
            var bigY = maskY * bigMax / maskMax;
            $(".bigimg").css("left", -bigX + 'px');
            $(".bigimg").css("top", -bigY + 'px');
        });
        $(".list_item li").mouseover(function () {
            $(this).addClass("current").siblings().removeClass("current");
            $(".preview_img img").attr('src', $(this).children("img")[0].src);
            $(".big img").attr('src', $(this).children("img")[0].src);
        });
        $(".choose_color a").click(function () {
            $(this).addClass("current").siblings().removeClass("current");
        });
        $(".choose_version a").click(function () {
            $(this).addClass("current").siblings().removeClass("current");
        });
        $(".choose_type a").click(function () {
            $(this).addClass("current").siblings().removeClass("current");
        });

        $(".reduce").mouseover(function () {
            if ($(".choose_amount input[type='text']").val() <= 1) {
                $(".reduce").css("cursor", "not-allowed");
            } else {
                $(".reduce").css("cursor", "pointer");
            }
        });
        $(".reduce").click(function () {
            if ($(".choose_amount input[type='text']").val() <= 1) {
                $(".reduce").css("cursor", "not-allowed");
            } else {
                $(".reduce").css("cursor", "pointer");
                num = $(".choose_amount input[type='text']").val();
                $(".choose_amount input[type='text']").val(num - 1);
            }
        });
        $(".add").click(function () {
            num = $(".choose_amount input[type='text']").val();
            $(".choose_amount input[type='text']").val(Number(num) + 1);
        });
        // $(".addCar").on('click',)
        

        $(".tab_list li").mouseover(function () {
            $(this).addClass("current").siblings().removeClass("current");
        });

        $(".detail_tab_list li").click(function () {
            var index = $(this).index();
            $(this).addClass("current").siblings().removeClass("current");
            $(".item").eq(index).show().siblings().hide();
        });

    })
    // 加入购物车
    function addcart(username,id){
        $('.addCar').click(function(){
            // 判断是否登录了
            // console.log(username);
            if(!username){
                localStorage.setItem('url',location.href)
                location.href = "login.html";
                return false;
            }
            // 已经登录了
            // 实际项目中的购物车数据在数据库
            // 我们用本地存储来做
            /*
            [
                {
                    username:'',
                    goodsid:2,
                    number:5
                },
    
                {
                    username:'',
                    goodsid:2,
                    number:5
                }
            ]
            */
           // 先判断本地存储中是否有数据
           var data = localStorage.getItem('data')
            // console.log(data);
            if(!data){
                var arr = [];
            }else{
                var arr = JSON.parse(data)
            }
            // 本地存储中是否有当前这个商品
            // find方法 - 找数组中满足条件的第一个元素 - 返回这个元素
            // console.log(arr);
            var findResult = arr.find(item=>item.goodsid==id && item.username===username)
            // console.log(obj);
            if(!findResult){
                var obj = {
                    username,
                    goodsid:id,
                    number:1
                }
                arr.push(obj)
            }else{
                // 有这个数据
                findResult.number++
            }
            localStorage.setItem('data',JSON.stringify(arr))
        })
    }
    // 登陆
function gologin(){
    $('.customNav li:first a').click(function(){
        // 点击登录
        // 跳转之前先设置一个本地存储将当前url存起来
        localStorage.setItem('url',location.href)
        // 需要跳转到登录页
        location.href = "login.html";
        // 登录成功后需要跳回来
    })
  } 

});